<template>
    <section class="emoji-box">
            <div class="emoji" ref="emo">
              <div v-for="item in emojiList">
                <span v-for="items in item" v-html="items "></span>
              </div>
            </div>
    </section>
</template>

<script>


    /**
     *@Description:画表情
     *@author ZY
     *@date 2022/11/20 21:38
     */
    export default {
        name: "canvas-emoji",
        data() {
            return {
                emojiList:[],
            }
        },
        mounted() {
            this.main()
        },
        methods: {
            main() {
                this.getEmoji()
            },

            getEmoji() {
                let doc = this.$refs.emo
                const arr = [
                    ['D83C', 'DF00', 'DFFF'],
                    ['D83D', 'DC00', 'DCFF'],
                    ['D83D', 'DD00', 'DDFF'],
                    ['D83D', 'DE00', 'DEFF'],
                    ['D83E', 'DF00', 'DFFF']
                ]
                const result = []
                arr.forEach(v => {
                    const items = []
                    const v1 = parseInt(v[1], 16)
                    const v2 = parseInt(v[2], 16)
                    for (let i = v1; i <= v2; i++) {
                        items.push((`${`\\u${v[0].toLocaleLowerCase()}\\u${i.toString(16)}`}`))
                    }
                    result.push(items)
                })
                doc.innerHTML = result.map(v => {
                    return `<div>${v.map(k => `<span value="${k}">${eval(`'${k}'`)}</span>`).join('')}</div>`
                }).join('')
                this.emojiList = result
            }
        }
    }
</script>

<style lang="scss" scoped>
    .border {
        border: 1px solid #dbdbdb;
        border-radius: 5px;
        overflow: auto;
    }
    .emoji-box {
        height: 300px;
        overflow: auto;
    }
</style>
